<template>
  <!--class="scale-container"  height: col.height + 'px', :tableName="col.tableName" :style="{ transform: `scale(${scale})` }" :style="getGridStyle(col)"-->
  <div>
    <!-- 属性面板 -->
    <el-drawer
      title="设置布局属性"
      :before-close="handleClose"
      :visible.sync="isShowAttribute"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="15%"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="横坐标位置(px)" prop="xposition">
          <el-input v-model="form.xposition" placeholder="请输入横坐标位置" />
        </el-form-item>
        <el-form-item label="纵坐标位置(px)" prop="yposition">
          <el-input v-model="form.yposition" placeholder="请输入纵坐标位置" />
        </el-form-item>
        <el-form-item label="高度(px)" prop="heightValue">
          <el-input v-model="form.heightValue" placeholder="请输入高度" />
        </el-form-item>
        <el-form-item label="宽度(%)" prop="widthValue">
          <el-input v-model="form.widthValue" placeholder="请输入宽度" />
        </el-form-item>
      </el-form>

      <el-button
        style="margin-top: 50px; text-align: center"
        type="primary"
        @click="submitForm"
        >确 定</el-button
      >
    </el-drawer>
    <!-- //画布面板 -->
    <el-row :gutter="10" v-for="col in BiConfVueSecondList" :key="col.id">
      <!-- <el-col
        :span="col.widthValue ? col.widthValue : 8"
       
      > -->
      <component
        style="top: 6px; z-index: 999; position: fixed"
        v-if="col.componentPath == 'listAll'"
        :is="col.componentPath"
        :row="col"
        @handleChangelistAll="handleChangelistAll"
      />
      <component
        style="top: 6px; right: 6px; z-index: 999; position: fixed"
        v-if="col.componentPath == 'day'"
        :is="col.componentPath"
        :row="col"
        @handleChangelistAll="handleChangelistAll"
      />
      <!-- style="margin-bottom: 16px" -->
      <el-card
        :style="{
          width: col.widthValue + '%',
          height: col.heightValue + 'px',
          marginTop: col.yposition + 'px',
          marginLeft: col.xposition + 'px',
        }"
        v-if="col.componentPath != 'listAll' && col.componentPath != 'day'"
      >
        <div
          slot="header"
          style="display: flex; justify-content: space-between"
        >
          <span
            ><i class="el-icon-s-data"></i>
            {{ col.titleInfo ? col.titleInfo : "" }}</span
          >
          <span></span>
            <el-button
              v-if="col.componentPath != 'PanelGroup'"
              type="primary"
              size="mini"
              @click="clickNode(col)"
            >
              布局配置
            </el-button>
            <!-- <el-button
              v-if="col.componentPath != 'PanelGroup'"
              type="primary"
              size="mini"
              @click="clickNodeInfo(col)"
            >
              配置
            </el-button> -->
          </span>
        </div>
        <component :is="col.componentPath" :row="col" />
      </el-card>
      <!-- </el-col> -->
    </el-row>
    <!-- </el-scrollbar> -->

    <!-- 属性面板 -->
    <el-drawer
      title="设置布局属性"
      :before-close="handleClose"
      :visible.sync="isShowSecond"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="30%"
    >
      <indexSecond :id="nodeInfo.vueSecondId" />
    </el-drawer>
  </div>
</template>
<script>
import indexSecond from "@/views/vue/BiConfVueSecond/indexSecond.vue";
import After from "@/views/vue/vueAfter/index.vue";
import chartData from "./components/chartData.vue";
import PanelGroup from "./components/PanelGroup.vue";
import listAll from "./components/listAll.vue";
import day from "./components/day.vue";
import { listBiConfVueDwd } from "@/api/vue/BiConfVueDwd";
import {
  listBiConfVueSecond,
  getBiConfVueSecond,
  delBiConfVueSecond,
  addBiConfVueSecond,
  updateBiConfVueSecond,
  query,
  LayoutVueFirstId,
} from "@/api/vue/BiConfVueSecond";
import {
  listBiVueLayoutInfo,
  getBiVueLayoutInfo,
  delBiVueLayoutInfo,
  addBiVueLayoutInfo,
  updateBiVueLayoutInfo,
} from "@/api/vue/BiVueLayoutInfo";
export default {
  name: "BiConfVueDwd",
  components: { chartData, After, PanelGroup, listAll, day, indexSecond },
  data() {
    return {
      nodeInfo: {},
      isShowSecond: false,
      form: true,
      isShowAttribute: false,

      count: 0,
      BiConfVueSecondList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    if (this.$route.query.obj) {
      this.queryParams.vueFirstId = this.$route.query.obj.id;
      this.getList();
    }
    console.log("vueFirstId", JSON.stringify(this.queryParams.vueFirstId));
  },
  mounted() {
    if (!this.queryParams.vueFirstId) {
      var route = JSON.parse(localStorage.getItem("route"));
      console.log(JSON.stringify(route));
      let parts = route.split("/");
      let lastPart = parts[parts.length - 1];
      console.log(lastPart);

      this.getvueFirstId(lastPart);
    }
  },
  //   window.addEventListener("resize", this.handleResize);
  //   this.handleResize(); // 页面加载时初始化缩放
  // },
  // beforeDestroy() {
  //   window.removeEventListener("resize", this.handleResize);
  // },
  methods: {
    /** 提交按钮 */
    submitForm() {
      // this.form.vueSecondId = this.row.id;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateBiVueLayoutInfo(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.handleClose();
            });
          } else {
            addBiVueLayoutInfo(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.handleClose();
              // this.isShowAttribute = false;
              // this.getList();
            });
          }
        }
      });
    },
    handleClose() {
      this.getList();
      this.isShowAttribute = false;
      this.isShowSecond = false;
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        xposition: null,
        yposition: null,
        heightValue: null,
        widthValue: null,
        vueSecondId: null,
      };
      this.resetForm("form");
    },
    // 点击某一个节点
    clickNode(node) {
      if (node.componentPath == "PanelGroup") {
        return false;
      }
      this.reset();
      this.form.vueSecondId = node.vueSecondId;
      listBiVueLayoutInfo({ vueSecondId: node.vueSecondId }).then(
        (response) => {
          // this.BiVueLayoutInfoList = response.rows;
          if (response.rows.length > 0) {
            getBiVueLayoutInfo(response.rows[0].id).then((response) => {
              this.form = response.data;
              this.isShowAttribute = true;
            });
          } else {
            this.isShowAttribute = true;
          }
        }
      );
    },

    clickNodeInfo(node) {
      this.nodeInfo = node;
      this.isShowSecond = true;
    },

    handleChangelistAll(type) {
      console.log(JSON.stringify(type));
      // this.getList();
      this.count++;
      // this.BiConfVueSecondList.forEach((element) => {

      //   element.tableName = this.count;
      // });
      // console.log(JSON.stringify(this.BiConfVueSecondList));
      this.updateTableNameByMatch(type, this.BiConfVueSecondList, this.count);
    },
    updateTableNameByMatch(ids, array, countValue) {
      // 遍历ids数组
      ids.forEach((id) => {
        // 查找匹配的对象
        const element = array.find((obj) => obj.vueSecondId === id);
        if (element) {
          // 如果找到了，更新tableName（尽管这通常不是一个好的做法）
          // 注意：这里我们直接使用了countValue，而不是this.count
          // 因为我们假设countValue已经是我们想要的值
          element.tableName = countValue.toString(); // 如果countValue是数字，可能需要转换为字符串
        }
      });
    },

    /** 查询vue配置二级列表 */
    getList() {
      //   this.loading = true;
      listBiConfVueSecond(this.queryParams).then((response) => {
        // response.rows.forEach((element) => {
        //   element.width = 8;
        // });
        // this.BiConfVueSecondList = response.rows;
        this.selectLayout(response.rows);
        // this.total = response.total;
        // this.loading = false;
      });
    },
    getvueFirstId(vueName) {
      // let vueFirstId;
      listBiConfVueDwd({ pathName: vueName }).then((response) => {
        this.queryParams.vueFirstId = response.rows[0].id;
        console.log("vueFirstId", JSON.stringify(this.queryParams.vueFirstId));
        this.getList();
      });
      // return vueFirstId;
    },
    selectLayout(firstArray) {
      LayoutVueFirstId(this.queryParams).then((response) => {
        // this.BiConfVueSecondList.forEach((item) => {
        //   response.forEach((element) => {
        //     if (element.vueSecondId == item.id) {
        //       this.BiConfVueSecondList.push({
        //         ...item,
        //         heightValue: element.heightValue,
        //         widthValue: element.widthValue,
        //       });
        //     }
        //   });
        // });
        let list = firstArray.map((item) => {
          // 在第二个数组中找到匹配的 vueSecondId
          const match = response.find(
            (secondItem) => secondItem.vueSecondId === item.id
          );

          // 如果没有找到匹配项，可以选择返回原始对象或添加一些默认值
          // 这里我们假设总是能找到匹配项，或者即使没有匹配项也返回原始对象
          if (match) {
            // 合并对象，这里使用 {...item, ...match} 来合并，但注意避免覆盖重要字段
            // 假设我们想要保留所有字段，但如果有冲突，我们可能需要根据实际情况调整
            return { ...item, ...match, vueSecondId: item.id }; // 注意：这里添加了 vueSecondId 以保持一致性，但可能不是必需的
          }

          return { ...item, vueSecondId: item.id }; // 如果没有找到匹配项，返回原始对象（或根据需要调整）
        });
        this.BiConfVueSecondList = list;
        console.log(JSON.stringify(this.BiConfVueSecondList));
      });
    },
  },
};
</script>
<style >
</style>